<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>

<body>
    <script>
        /*
            Proxy如其名， 它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器”

            Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。
        */

        // 我们先来看看ES6之前是怎么做到拦截的, 是用的Object.defineProperty(), 但是只支持对象类型，不支持数组。所以并不是很好用
        let obj = {
            name: 'miakisa'
        };

        function lanjie(obj,key) {
            let value = null;
            Object.defineProperty(obj, 'name', {
                set(newVal) {
                    // 注意不要在这里写obj[key] = newVal; 因为set函数本就是拦截赋值的，你这么写相当于又调了一遍set，会陷入死循环的
                    console.log('有人要把name属性赋值为: ' + newVal);
                    value = newVal;
                },
                get() {
                    return value;
                }
            });
        }
        lanjie(obj,'name');
        obj.name = 'zzzz';
        console.log(obj);
    </script>
</body>

</html>